<template>
  <q-page class="fit" style="padding-top: 50px">
    <div v-if="tab == 'apply'" class=" q-ma-sm q-pa-sm b-radius-lg shadow-6 bg-white">
      <q-form @submit="onSubmit" @reset="onReset" ref="form" class="row q-col-gutter-sm">
        <q-select
          class="col-12 col-md-6"
          rounded
          outlined
          v-model="reimburseType"
          :options="reimburseOptions"
          @input="handleSelectType"
          label="报销类型"
          :rules="[(val) => (val && val.length > 0) || '请选择报销类型']"
        />
        <q-select
          class="col-12 col-md-6"
          v-if="reimburseType == '项目报销'"
          rounded
          outlined
          label="选择项目"
          v-model="reimProject"
          :options="projectOptions"
          option-value="pid"
          option-label="name"
        />

        <q-input
          class="col-12 col-md-6"
          rounded
          outlined
          type="text"
          v-model="form.amount"
          label="报销金额 *"
          suffix="元"
          lazy-rules
          :rules="[(val) => (val && val.length > 0) || '请输入金额']"
        />

        <q-input
          class="col-12 col-md-6"
          rounded
          outlined
          v-model="form.reason"
          label="报销原因 *"
          lazy-rules
          :rules="[
            (val) => (val && val !== '' && val.length > 0) || '请输入原因',
          ]"
        />
        <q-input
          class="col-12 col-md-6"
          rounded
          outlined
          v-model="form.fundtime"
          label="费用发生时间 *"
          lazy-rules
          :rules="[
            (val) =>
              (val && val !== '' && val.length > 0) || '请输入费用发生时间',
          ]"
        >
          <q-popup-proxy
            ref="qDateProxy"
            transition-show="scale"
            transition-hide="scale"
            :breakpoint="2000"
          >
            <q-date v-model="form.fundtime" @input="handleselect">
              <div class="row items-center justify-end">
                <q-btn v-close-popup label="关闭" color="primary" flat />
              </div>
            </q-date>
          </q-popup-proxy>
          <template v-slot:append>
            <q-icon name="event" class="cursor-pointer"> </q-icon>
          </template>
        </q-input>
        <q-input

        class="col-12 col-md-6"
          v-model="form.content"
          rounded
          outlined
          type="textarea"
          label="费用说明"
        />
        <q-file
        class="col-12 col-md-6"
          ref="appdendfiles"
          v-model="files"
          label="选择附件 *"
          rounded
          outlined
          append
          clearable
          use-chips
          name="files"
          counter
          hint="上传花费凭据文件"
          :counter-label="counterLabelFn"
          max-files="3"
          multiple
          accept=".png,.jpg,.pdf,.xls,.word,.xlsx,"
        >
          <template v-slot:prepend>
            <q-icon name="attach_file" />
          </template>
        </q-file>
        <div class="column items-center justify-center col-12 " >
          <div>
            <q-btn
              label="重置"
              type="reset"
              color="primary"
              flat
              class="q-ml-sm"
            />
          </div>
          <div class="q-mt-sm q-mb-md">
            <q-btn
              rounded
              :loading="isload"
              style="width: 200px"
              label="提交"
              type="submit"
              color="primary"
            />
          </div>
        </div>
      </q-form>
    </div>
    <div v-else class="q-pa-sm bg-blue-grey-1">
      <reimburse-list
        ref="reimburse-list"
        :isLoad="isLoad"
        :reimburseList="reimburselist"
        :noMore="noMoreReimBurse"
        @refresh-reimburse="handleRefresh"
      ></reimburse-list>

      <div
        v-if="reimburselist.length == 0"
        class="row items-center justify-center"
        style="height: 100%"
      >
        <img
          :style="$q.platform.is.mobile ? 'height:200px;width:250px' : ''"
          src="icons/emptyinfo.png"
          alt=""
          srcset=""
        />
      </div>
    </div>

    <q-page-sticky position="top" expand class="full-width">
      <q-tabs
        v-model="tab"
        @input="handletab"
        dense
        class="bg-grey-1 full-width"
        active-color="primary"
        indicator-color="primary"
        align="justify"
        style="height: 50px"
      >
        <q-tab name="apply" label="报销申请" />
        <q-tab name="myreimburse" label="我的报销" />
      </q-tabs>

      <q-separator class="full-width" color="grey-4" />
    </q-page-sticky>
  </q-page>
</template>

<script>
import { submitreimburse, getmyreimburse } from "assets/api/app";
import { getProjectList } from "assets/api/project";
export default {
  name: "ReimBursePage",
  components: {
    ReimburseList: () => import("components/app/ReimburseList.vue"),
  },
  data() {
    return {
      tab: "apply",
      form: {
        type: "日常报销",
        pid: null,
        amount: null,
        fundtime: null,
        reason: null,
      },
      isload: false,
      files: null,
      loaded: true,
      reimburselist: [],
      reimburseType: "日常报销",
      reimburseOptions: ["日常报销", "项目报销"],
      isReimDetail: false,
      frid: "",
      pageNum: 1,
      pageSize: 50,
      projectOptions: [],
      reimProject: {},
      reimPageNum: 1,
      reimPageSize: 10,
      isLoad: true,
      noMoreReimBurse: false,
    };
  },
  methods: {
    handleSelectType() {
      console.log("selecttype", this.reimburseType);
      if (this.reimburseType == "项目报销") {
        this.loadProjectList();
      }
    },
    handleRefresh() {
      console.log("refresh load");
      this.reimPageNum += 1;

      getmyreimburse({
        pageNum: this.reimPageNum,
        pageSize: this.reimPageSize,
      }).then((res) => {
        console.log(res);
        if (res.data.data.length > 0) {
          let data = res.data.data;
          data.forEach((item) => {
            this.reimburselist.push(item);
          });
        } else {
          this.noMoreReimBurse = true;
          this.$refs["reimburse-list"].$children[0].stop();
        }
      });
    },

    loadProjectList() {
      var status = 0;

      let reqData = {
        status: status,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
      };
      var projectOptions = [];
      getProjectList(reqData).then((res) => {
        let data = res.data.data;
        console.log(data);

        if (data.length > 0) {
          data.forEach((item) => {
            projectOptions.push({
              name: item.name,
              pid: item.pid,
            });
          });
          this.reimProject = projectOptions[0];
          this.projectOptions = projectOptions;
        }
      });
    },
    handleReimDialog() {
      this.isReimDetail = false;
    },
    handleselectreimburse(frid) {
      this.frid = frid;

      this.isReimDetail = true;
    },
    handletab() {
      if (this.tab == "myreimburse") {
        this.reimPageNum = 1;
        getmyreimburse({
          pageNum: this.reimPageNum,
          pageSize: this.reimPageSize,
        }).then((res) => {
          console.log(res);
          this.isLoad = false;

          if (res.data.data.length > 0) {
            let data = res.data.data;
            data.forEach((item) => {
              this.reimburselist.push(item);
            });
          }
          console.log(this.reimburselist);
        });
      }
    },

    onSubmit() {
      if (this.files) {
        this.isload = true;
        var formdata = new FormData();
        this.files.forEach((item) => {
          formdata.append("files", item);
        });
        this.form.type = this.reimburseType;
        this.form.pid = this.reimProject.pid;

        let params = this.form;
        for (let i in params) {
          formdata.append(i, params[i]);
        }
        var vm = this;
        submitreimburse(formdata)
          .then((res) => {
            vm.isload = false;
            if (res.data.code == 1) {
              this.$q.notify({
                color: "light-green-4",
                icon: "far fa-check-circle",
                position: "center",
                textColor: "white",
                message: "提交成功！",
                timeout: "1000",
              });
              vm.onReset();
            } else {
              this.$q.notify({
                color: "red-5",
                textColor: "white",
                icon: "warning",
                position: "top",
                message: "提交失败！",
                timeout: "1000",
              });
              vm.isload = false;
            }
          })
          .catch(() => {
            this.$q.notify({
              color: "red-5",
              textColor: "white",
              icon: "warning",
              position: "top",
              message: "提交失败！",
              timeout: "1000",
            });
            vm.isload = false;
          });
      } else {
        this.$q.notify("请上传凭据");
      }
    },
    onReset() {
      this.$refs["form"].resetValidation();
      this.form = {
        type: "日常报销",
        amount: null,
        fundtime: "",
        reason: null,
      };
      this.files = [];
    },
    counterLabelFn({ totalSize, filesNumber, maxFiles }) {
      return `${filesNumber} files of ${maxFiles} | ${totalSize}`;
    },
    handleselect() {
      this.$refs["qDateProxy"].hide();
    },
  },
};
</script>
